<script setup>
import { ref, watchEffect } from 'vue'
import { labsApi } from '@/api'
const loading = ref(false)
const data = ref(null)
watchEffect(async () => {
    await labsApi.getLabInfos().then((res) => {
        data.value = res.data
    })
    loading.value = false
})
</script>

<template>

    <div v-loading="loading" style="width:100%;margin:50px">
        <el-table :data=data table-layout="auto" :stripe="true">
            <el-table-column property="labName" label="实验室" align="center" />
            <el-table-column property="campus" label="所在校区" align="center" />
            <el-table-column property="location" label="位置" align="center" />
            <el-table-column property="labRemark" label="可容纳人数" align="center" />

            <el-table-column align="center">
                <template #header>
                    <el-button @click="addInformation">添加</el-button>
                </template>
                <template #default="scope">
                    <el-button size="small" @click="eidtInformation(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="deleteInformation(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>